<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap - 网格系统</title>

    <link rel="stylesheet" href="static/bootstrap.min.css">

    <style>
        .box {
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
        }
    </style>
</head>
<body>
<!-- 所有行（row）都需要放置于容器（container）内，以便获得合适的位置及尺寸。 -->
<div class="container">
    <h1>使用 Bootstrap 网格系统进行排版</h1>
    <!-- 以 class 为 row 的 div 划分每一行 -->
    <div class="row">
        <!--
            以 class 为 col-aa-bb 的 div 划分每一行中的每一列（最大可划分12列）。
            此处aa可以为 xs（超小设备手机） 、sm（小型设备平板电脑） 、md（中型设备台式电脑） 、lg（大型设备台式电脑），添加多个样式可使网格系统适应不同尺寸的任意设备。
            此处bb可以为 1-12 的任意数字，这意味着可以将12列的大小划分成任意等份。（参考以下样例）
        -->
        <div class="col-md-3 box" style="background-color: #dedef8;">
            <h4>第一列</h4>
            <p>
                这是一段文字。这是一段文字。这是一段文字。这是一段文字。
            </p>
        </div>

        <div class="col-md-9 box" style="background-color: #dedef8;">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-md-6 box" style="background-color: #B18904;">
                    <p>
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                    </p>
                </div>
                <div class="col-md-6 box" style="background-color: #B18904;">
                    <p>
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 box" style="background-color: #B18904;">
                    <p>
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                    </p>
                </div>
                <div class="col-md-6 box" style="background-color: #B18904;">
                    <p>
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                        这是一段文字。这是一段文字。这是一段文字。这是一段文字。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="static/jquery.min.js"></script>
<script src="static/bootstrap.min.js"></script>
</body>
</html>